<script setup lang="ts">
// 表单
import { reactive ,ref,onMounted,onBeforeMount, nextTick} from "vue";
import router from "@/router";
import { UploadFilled } from '@element-plus/icons-vue'
import { ThematicStore } from "@/stores/BackData/Thematic/Thematic";
import { getHMS } from "@/utils/time";
// 请求
import { createPartThematic,getAllThematic,delAllThematic,getPartThematic,delPartThematic,idgetPartThematic } from "@/api/teacher/hu/thematic";
let nowname=ref();
let nowisShelves=ref()
let createthematicName=ref()
let createthematicDescription=ref()
let createcategoryId=ref()

const store= ThematicStore();

// onBeforeMount(()=>{
// delAllThematic();
// delPartThematic();
// }
// )

onMounted(() => {

  getAllThematic();
  getPartThematic();
});
//创建专题
const createThematic = () => {
  dialogFormVisible.value = false
  console.log("submit!");
  console.log(createthematicName.value);
  console.log(createthematicDescription.value);
  console.log(createcategoryId.value);
  createPartThematic(createthematicName.value,createthematicDescription.value,createcategoryId.value);
  getAllThematic();
  getPartThematic();
  
  
  
  
}
// 搜索
const onSubmit = () => {
  // console.log(nowname.value);
  // console.log(store.thematicInfo);
  console.log(nowisShelves.value);
  getAllThematic(nowname.value,nowisShelves.value);
  getPartThematic(1,nowname.value,nowisShelves.value)
  console.log(store.pageall);
  
  console.log(store.partthematicInfo);
};

// 详细
const handleClick = async (ndate:any)=>{
  console.log("click!");
  console.log(ndate.id);
  
  store.pushNowDate(ndate)
  await  idgetPartThematic(ndate.id)
  // console.log(store.nowdatilthematicInfo);
  
  // console.log(store.nowthematicInfo);
  // console.log(store.nowthematicInfo[0].id);
  // console.log(store.nowthematicInfo[0].thematicName);
  router.push({path:'/ManageDetail'})
  
}

// 表格

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})


// const currentPage3 = ref(5);
const pageSize3 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

// const handleSizeChange = (val: number) => {
//   console.log(`${val} items per page`);
// };
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  delPartThematic();
  getPartThematic(val,nowname.value,nowisShelves.value);

};

// const  text = async ()=>{

// }
// async function ge() {
//   await nextTick()
//   let a=document.getElementById("a");
//   console.log(a);
// }
</script>
<template>
  <div style="width: 80vw; height: 100vh">
    <div class="common-layout">
      <el-container>
        <el-header class="title"> 专题管理 </el-header>
        <el-main>
          
          
          
          <div class="search">
            <el-form
              :inline="true"
         
              class="demo-form-inline"
            >
              <el-form-item>
                <el-input
                  v-model="nowname"
                  placeholder="请输入id或专题名称"
                  clearable
                  
                />
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="nowisShelves"
                  placeholder="是否上架"
                  clearable
                >
                  <el-option label="是" value="1" />
                  <el-option label="否" value="0" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
              </el-form-item>
            </el-form>





            <el-button type="primary"  @click="dialogFormVisible = true" >
             创建专题
            </el-button>
            <el-dialog v-model="dialogFormVisible" title="创建专题">
              <el-form :model="form">
                <div class="titleword">*专题名称</div>
                <input type="text" class="inputbox" placeholder="请输入专题名称" v-model="createthematicName">
                <div class="titleword">*专题描述</div>
                <input type="text" class="inputbox" placeholder="清输入专题描述" v-model="createthematicDescription">
                <div class="titleword">*所属类目</div>
                <select name="type1" id="type1" class="selecttype" v-model="createcategoryId">
                  <option value="4">监理工程师</option>
                  <option value="5">造价工程师</option>
                  <option value="6">前期咨询</option>
                </select>
                <!-- <select name="type2" id="type2" class="selecttype">
                  <option value="监理工程师"></option>
                  <option value="造价工程师"></option>
                  <option value="前期咨询"></option>
                </select>
                <select name="type3" id="type3" class="selecttype">
                  <option value="监理工程师"></option>
                  <option value="造价工程师"></option>
                  <option value="前期咨询"></option>
                </select> -->
                <div class="titleword" id="tess">*专题封面</div>
                <div>
                  <el-form-item  class="photo">
                    <el-upload
                      class="upload-demo"
                      drag
                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                      multiple>
                      <el-icon class="el-icon--upload"><upload-filled class="upfill"/></el-icon>
                      <!-- <div class="el-upload__text">
                        Drop file here or <em>click to upload</em>
                      </div> -->
                    </el-upload>
                  </el-form-item>
                </div>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                  <el-button type="primary" @click="createThematic">
                    提交
                  </el-button>
                </span>
              </template>
            </el-dialog>
          </div>




          <div class="result" >
            <el-table :data="store.partthematicInfo" border style="width: 100%">
              <el-table-column prop="id" label="专题id" width="100" />
              <el-table-column prop="thematicName" label="专题名称" width="350" />
              <el-table-column prop="createTime" label="创建时间" width="250" #default="scope">
                {{ getHMS(scope.row.createTime)}}
              </el-table-column>
              <el-table-column prop="isShelves" label="是否上架" width="130" #default="scope">
                    <template v-if="scope.row.isShelves == 1">是</template>
                    <template v-else-if="scope.row.isShelves == 0">否</template>
              </el-table-column>
              <el-table-column prop="participantNum" label="参与人数" width="130" />
              <el-table-column fixed="right" label="操作" >
                <template #default="scope" >
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleClick(scope.row)"
                    >详细</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>


          <div class="block">
            <el-pagination
              
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-size="4"
              layout="prev, pager, next, jumper"
              :total="store.pageall">
            </el-pagination>
          </div>




        </el-main>
      </el-container>
    </div>
  </div>
</template>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
.search {
  display: flex;
  justify-content: space-between;
}
.title {
  line-height: 55px;
  box-shadow: -1px 1px 1px 3px #f5f7fa;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.titleword{
  margin: 0;
  line-height: 30px;
}
.inputbox{
  height: 40px;
  width: 370px;
}
.selecttype{
  height: 30px;
  width: 150px;
  margin-right: 20px;
}
.upload-demo{
  width: 150px;
}
</style>
